<template>
	<view class="index">
		<view class="container">
			<!-- #ifdef MP-WEIXIN -->
			<view class="" style="height: 150rpx;"></view>
			<!-- #endif -->

			<view class="logo">
				<image src="/static/images/logo.png" mode="aspectFit"></image>
			</view>
			<view class="nav-list">
				<view class="nav-item" v-for="(item,index) in navList" :key="index" @click="nav(item.path)">
					<image class="nav-icon" :src="item.icon" mode="aspectFit"></image>
					<view class="nav-title">{{item.title}}</view>
				</view>
			</view>

			<view class="today-course">
				<view class="course-option">
					<view class="option-title">今日课表</view>
					<view class="option-time">第{{todayWeeks}}周 周{{getWeekText(todayWeek)}}</view>
				</view>
				<view class="course-box">
					<block v-if="todayCourseList.length==0">
						<view class="empty-course">
							<image class="empty-img" src="/static/images/empty.png" mode="aspectFit"></image>
							<view class="empty-title">今天没有课哦，快去充实一下自已已吧！</view>
						</view>

					</block>
					<block v-else>
						<view class="course-list">
							<view class="course-item" v-for="(item,index) in todayCourseList" :key="index">
								<view class="course-name">{{item.name}}</view>
								<view class="course-address">{{item.address?item.address:'未知'}}</view>
							</view>
						</view>
					</block>
				</view>
			</view>

		</view>
	</view>

</template>

<script>
	import {
		getNowWeek
	} from "@/utils/util.js"
	export default {
		data() {
			return {
				navList: [{
					title: '查课表',
					icon: "/static/images/course.png",
					path: "/pages/course/course",
				}, {
					title: '查成绩',
					icon: "/static/images/score.png",
					path: "/pages/score/score",
				}, {
					title: '查考勤',
					icon: "/static/images/score.png",
					path: "/pages/attendance/attendance",
				}, {
					title: '校历',
					icon: "/static/images/score.png",
					path: "/pages/calendar/calendar",
				}, ],
				startDate: '2023/02/20', //开学日期
				totalWeek: 20, //周总数
				todayWeek: 0,
				todayWeeks: 0,
				todayCourseList: []
			}
		},
		onLoad() {
			this.getTodayCourseList();
		},
		methods: {
			nav(path) {
				// console.log(path);
				// 跳转页面不成功，就跳转Tabbar页面
				uni.navigateTo({
					url: path,
					fail: (e) => {
						uni.switchTab({
							url: path
						})
					}
				})
			},
			getTodayCourseList() {
				this.todayWeek = new Date().getDay()
				this.todayWeeks = getNowWeek(this.startDate, this.totalWeek)
				// 测试用
				// this.todayWeek = 2
				// this.todayWeeks = 15
				// console.log(this.todayWeek, this.todayWeeks);
				const courseList = uni.getStorageSync('courses')
				if (!courseList) return
				const todayCourseList = courseList.filter((item) => {

					return item.week == this.todayWeek && item.weeks.indexOf(this.todayWeeks) > -1
				})
				// 排序
				todayCourseList.sort((a, b) => {
					return a.section - b.section
				})
				console.log(todayCourseList);
				this.todayCourseList = todayCourseList
				console.log(this.todayCourseList);
			},
			// 返回星期文字
			getWeekText(num) {
				const arr = ['日', '一', '二', '三', '四', '五', '六']
				return arr[num]
			}

		},
	}
</script>

<style lang="scss" scoped>
	.index {
		background-color: #fff;
		height: 100vh;
	}

	.container {
		padding: 48rpx 20rpx;

		.logo {
			width: 100%;
			height: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {

				width: 340rpx;
				height: 180rpx;
			}
		}

		.nav-list {
			width: 100%;
			height: 176rpx;
			border-radius: 24rpx;
			box-shadow: 0rpx 0rpx 24rpx -4rpx rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 14rpx 40rpx;
			margin-top: 46rpx;

			.nav-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 96rpx;
					height: 96rpx;
				}

				.nav-title {
					font-size: 24rpx;
					color: #3d3d3d;
					margin-top: 4rpx;
				}
			}
		}

		.today-course {
			width: 100%;
			border-radius: 24px;
			background: #FFFFFF;
			box-shadow: 0px 0px 24rpx -4rpx rgba(0, 0, 0, 0.1);
			margin-top: 30rpx;
			padding: 30rpx;

			.course-option {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 70rpx;

				.option-title {
					font-size: 40rpx;
					font-weight: 500;
					color: #3E9C96;
				}

				.option-time {
					font-size: 26rpx;
					color: #666666;
				}
			}

			.course-box {
				margin-top: 10rpx;

				.empty-course {
					padding: 40rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.empty-img {
						width: 260rpx;
						height: 140rpx;
					}

					.empty-title {
						font-size: 26rpx;
						color: #999999;
						margin-top: 80rpx;
					}

				}


				.course-list {
					width: 100%;

					.course-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 20rpx 0;

						&:not(:last-child) {
							border-bottom: 1rpx solid #f6f6f6;
						}

						.course-name {
							color: #3d3d3d;
						}

						.course-address {
							font-size: 24rpx;
							color: #838383;
						}
					}
				}
			}
		}
	}
</style>